<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text">renren-fast-vue</h2>
          <p class="brand-info__intro">renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。</p>
        </div>
        <div class="login-main">
          <h3 class="login-title">忘记密码</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="account">
              <el-input v-model="dataForm.account" placeholder="请输入邮箱账号"></el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input v-model="dataForm.newPassword" type="password" placeholder="请输入新的密码"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input v-model="dataForm.confirmPassword" type="password" placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item prop="verify">
              <el-row>
                <el-col :span="14">
                  <el-input class="verify-input" v-model="dataForm.verify" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10">
                  <el-button class="verify-btn" id="get-verify-btn" type="text" @click="getVerify()">获取验证码</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="forget-password-btn-submit" id="confirm" type="primary" @click="dataFormSubmit()">确认</el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="back-login-btn" id="backLogin" type="primary" @click="backLogin()">返回登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forget-password',
  data () {
    let isEmail = (value) => {
      // 验证是否为准确的邮箱账号
      let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      return !(pattern.exec(value) == null || value === '')
    }
    let validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('账号不能为空'))
      } else {
        setTimeout(() => {
          if (!isEmail(value)) {
            callback(new Error('输入有误，请输入邮箱账号'))
          } else {
            callback()
          }
        }, 500)
      }
    }
    let validatePassword1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.dataForm.confirmPassword !== '') {
          this.$refs.dataForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    let validatePassword2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.dataForm.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      dataForm: {
        account: '',
        newPassword: '',
        confirmPassword: '',
        verify: ''
      },
      dataRule: {
        account: [
          { required: true, validator: validateAccount, trigger: 'blur' }
        ],
        newPassword: [
          { required: true, validator: validatePassword1, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePassword2, trigger: 'blur' }
        ],
        verify: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/forget-password/confirm'),
            method: 'post',
            data: this.$http.adornData({
              'account': this.dataForm.account,
              'newPassword': this.dataForm.newPassword,
              'confirmPassword': this.dataForm.confirmPassword,
              'verify': this.dataForm.verify
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$router.replace({ name: 'login' })
              alert('修改成功')
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 返回登录页面
    backLogin () {
      this.$router.replace({ name: 'login' })
    },
    // 获取验证码
    getVerify () {
      this.$http({
        url: this.$http.adornUrl('/sys/forget-password/send-verify'),
        method: 'post',
        data: this.$http.adornData({
          'account': this.dataForm.account
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          alert('邮件发送成功')
        } else {
          this.$message.error(data.msg)
        }
      })
      let clock = ''
      let nums = 60
      let verify = document.getElementById('get-verify-btn')
      // let email = this.dataForm.account
      verify.disabled = 'disabled'
      verify.innerText = nums + '秒后重新获取'
      // verify.text(nums + '秒后重新获取')
      // 一秒执行一次
      clock = setInterval(() => {
        nums--
        if (nums > 0) {
          verify.innerText = nums + '秒后重新获取'
        } else {
          // 清除 js 定时器
          clearInterval(clock)
          verify.disabled = false
          verify.innerText = '获取验证码'
          // 重置时间
          nums = 60
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, .6);
  overflow: hidden;
  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/login_bg.jpg);
    background-size: cover;
  }
  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }
  .brand-info {
    margin: 220px 100px 0 90px;
    color: #fff;
  }
  .brand-info__text {
    margin:  0 0 22px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform : uppercase;
  }
  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: .6;
  }
  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  .verify-input {
    width: 100%;
  }
  .verify-btn {
    width: 100%;
  }
  .forget-password-btn-submit {
    width: 100%;
  }
  .forget-password-btn-submit {
    float: right;
  }
}
</style>
